<template>
    <div class="member-page">
        <div class="box">
            <van-image class="box-bg-img" :src="require('../../assets/image/member.png')"></van-image>
            
            <div class="top">
                <div class="label">{{  $i18n.t('default.my.goldCoin') }}</div>
                <div class="value ">{{userForm.userTotal}}</div>
            </div>
            <div class="bottom">
                <div class="flex">
                    <div class="label">{{  $i18n.t('default.my.goldCoinTip') }}</div>
                    <div class="value ">{{userForm.userBalance}}</div>
                </div>
                <div class="flex">
                    <div class="label">{{  $i18n.t('default.my.freezeGoldCoin') }}</div>
                    <div class="value ">{{userForm.userFreeze}}</div>
                </div>
            </div>
        </div>
        
        <div class="cell-box van-hairline--surround">
            <!-- <div class="cell " @click="gotoPage('/member/makeOver')">
                    <div class="cell-info">
                        <p class="title">转让</p>
                    </div>
                    <van-icon class="icon" name="arrow" />
            </div> -->
        </div>
        <div class="cell-box van-hairline--surround">
            <div class="cell " @click="gotoPage('/member/withdraw')">
                    <div class="cell-info">
                        <p class="title">{{  $i18n.t('default.my.withdraw') }}</p>
                    </div>
                    <van-icon class="icon" name="arrow" />
            </div>
        </div>
        <div class="btns">
            <!-- <van-button :disabled="true" class="btn home-button">暂未发放的奖金</van-button> -->
        </div>
    </div>
</template>
<script>
    export default {
        name: 'member',
        data () {
            return {
                userForm: {}
            }
        },
        created(){
            this.userForm = this.$store.state.userInfo;
            if(this.$store.state.userInfo.userBalance ==undefined){
                this.init();
            }
            console.log('this.userForm',this.userForm)
        },
        mounted() {
     
        },
        methods: {
            init(){
                this.$api.get(this.$url.user.info).then(res=>{
                    console.log('my...res:',res)
                    if(res.code == 'SUCCESS'){
                        this.userForm = res.data;
                        this.$store.commit('setUserInfo',res.data);
                    }else{
                        
                    }
                })
            },
            gotoPage(value){
                this.$router.push({path:value});
            },
        }
    }
</script>
<style scoped lang="scss">
.member-page {
    background: url('../../assets/image/my-bg.png') no-repeat;
    min-height: 100vh;
    padding:.3rem;
    .box{
        height: 4rem;
        position: relative;
        padding: .57rem .62rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .box-bg-img{
        width: 100%;
        height: 4rem;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        border-radius: 0.1rem;
        
    }
    .top{
        position: relative;
        z-index: 2;
    }
    .bottom{
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        .flex{
            padding: 0 .1rem;
        }
    }
    .label{
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 0.3rem;
        color: #323232;
    }
    .value{
        font-family: SimHei;
        font-weight: 400;
        font-size: 0.6rem;
        color: #43331E;
    }
    .cell-box{
        height:.88rem;
        margin-top: .3rem;
    }
    .cell{
        padding: 0 .3rem;
        height:.88rem;
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: .05rem;;
        border: 1px solid #755936;
        justify-content: space-between;
        color: #755936;
    }
}
.btns{
    margin-top: 1rem;
    text-align: center;
    .btn{border-radius: .1rem;}
}
</style>

<style>
.box-bg-img img{
    border-radius: 0.1rem;
}
</style>